<template>
	<view v-if="details.courseName" class="box" :style="theme">
		<view class="detailsTop">
			<view class="name">{{details.courseName}}</view>
			<!-- <view class="lm">课程类目：{{details.courseItem}}</view> -->
			<view class="flex flex_between">
				<text>课时价格：¥{{isJoin == 1?details.secKillInfo.discountPrice:details.price?details.price:0}}</text>
				<!-- <text>总课时：{{privateCourseTimeInterval.length>0?privateCourseTimeInterval.length:details.classNum}}课时</text>
				<text v-if="details.numLimit == 2">班级人数：{{details.peopleNumLow}}～{{details.peopleNumUp}}</text>
				<text v-else>班级人数：不限制</text> -->
			</view>
		</view>
		<view class="detailsBottom lxxx">
			<view class="fwb">联系信息</view>
			<view class="flex-left" @click="editUser">
				<view class="c3 f30 flex-1 limit-1-line">{{username}}</view>
				<view class="c9 f30 flex-2">{{userTel}}</view>
				<image :src="imgHost+'/ic_edit.png'" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view class="detailsBottom">
			<view class="fwb flex flex_between">上课学员<text @click="addShow">添加</text></view>
			<view>
				<checkbox-group @change="checkboxChange">
					<label class="flex-c xueyuan" v-for="(item, index) in items" :key="index">
						<view class="label">{{item.name}}<text>{{item.age?' | ' + item.age+'岁':''}}</text></view>
						<checkbox class="checkbox-backgroun-color checkbox-round" :value="item.value"
							:checked="item.checked" />
					</label>
				</checkbox-group>
			</view>
		</view>
		<!-- 活动信息 -->
		<view class="detailsBottom">
			<view class="fwb">课程信息</view>
			<!-- <view class="label" v-if="details.beginDate">
				<view class="label-left">开课日期</view>
				<view class="label-right">{{details.beginDate}}</view>
			</view>
			<view class="label" v-if="details.courseEndDate">
				<view class="label-left">结课日期</view>
				<view class="label-right">{{details.courseEndDate}}</view>
			</view> -->
			<!-- 	<view class="label">
				<view class="label-left">有效期</view>
				<view class="label-right">
					{{details.termNum && details.termType ?details:'' }}{{ details.termNum && details.termType && details.termType == "0" ? '年': details.termNum && details.termType && details.termType == "1" ? '月': details.termNum && details.termType && details.termType == "2" ? '日':'无' }}
				</view>
			</view> -->
			<!-- <view class="label" v-if="details.endTime">
				<view class="label-left">报名截止</view>
				<view class="label-right">{{details.endTime}}</view>
			</view> -->
			<!-- 	<view class="label">
				<view class="label-left">课程类型</view>
				<view class="label-right">{{details.courseItem}}</view>
			</view> -->
			<!-- <view class="label">
				<view class="label-left">报名人员</view>
				<view class="label-right"><text
						v-if="details.numLimit == 2">限{{details.peopleNumLow}}～{{details.peopleNumUp}}人</text><text
						v-else>不限制</text>｜已报名<text class="redColor">{{peopleNum?peopleNum:details.peopleNum}}</text>人
				</view>
			</view> -->
			<view v-if="day && privateCourseTimeInterval && privateCourseTimeInterval.length > 0" class="label">
				<view class="label-left">上课时间</view>
				<view class="label-right">
					<view v-for="(item, index) in privateCourseTimeInterval" :key="index">{{day + ' ' + item.startPeriodTime + '~' + item.endPeriodTime}}</view>
				</view>
			</view>
			<view class="label" v-if="details.teacherInfo && details.teacherInfo && details.teacherInfo.length == 1">
				<view class="label-left">上课教练</view>
				<view class="label-right">{{details.teacherInfo[0].teacherName}}</view>
			</view>
			<view class="label" v-if="details.teacherInfo && details.teacherInfo.length == 1 && details.teacherInfo[0].teacherLevel">
				<view class="label-left">教练等级</view>
				<view class="label-right">{{details.teacherInfo[0].teacherLevel}}</view>
			</view>
			<view class="label">
				<view class="label-left">上课地点</view>
				<view class="label-right">{{details.site}}</view>
			</view>
		</view>
		<view class="detailsBottom">
			<!-- <view class="zks flex_between flex"><text>总课时</text><text>{{privateCourseTimeInterval.length>0?privateCourseTimeInterval.length:details.classNum}}课时</text></view>
			 -->
			 <view class="kcj flex_between flex">
				<view>课程总价</view>
				<view>¥<text>{{formatMoney()}}</text>
				</view>
			</view>
		</view>
		<view class="kuan"></view>
		<view class="box_footer">
			<view class="box_footer_agree">
				<view class="checkboxBoxD" @click="isTyBtn">
					<view class="checkboxBox" :class="isActive?'on':''">
						<u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
					</view>
				</view>
				<view class="flex-1">我已阅读并同意<text @click="getYx">《{{venueName || ''}}课程合同》</text>和<text
						@click="getYxb">《安全与保险须知》</text></view>
			</view>
			<view class="bottomState flex flex_between">
				<view class="left">实付：<text class="redColor">¥{{formatMoney()}}</text>
				</view>
				<view class="right" @click="$noMultipleClicks(submit)">立即支付</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" round="20rpx">
			<view class="pwd_box">
				<view style="padding: 0 20rpx 0 30rpx;">
					<u--form labelPosition="left" labelWidth="7em">
						<u-form-item label="联系人姓名：" borderBottom required>
							<u--input v-model="usernames" border="none" placeholder="请输入联系人姓名" maxlength="20">
							</u--input>
						</u-form-item>
						<u-form-item label="联系人电话：" required>
							<u--input v-model="userTels" type="number" border="none" placeholder="请输入联系人电话"
								maxlength="11">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="pwd_box_footer" style="margin-top: 30rpx">
					<view class="pwd_box_footer_qx" @click="editUser">取消</view>
					<view class="pwd_box_footer_qd" @click="$noMultipleClicks(memberTJ)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showht" @close="onhtClose" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="getYx">《{{venueName || ''}}课程合同》</text>和<text @click="getYxb">《安全与保险须知》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="onhtClose">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showbx" @close="onbxClose" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="getYxb">《安全与保险须知》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="onbxClose">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				noClick: true,
				details: {},
				isActive: false,
				show: false,
				birthday: '',
				username: '',
				userTel: '',
				usernames: '',
				userTels: '',
				items: [],
				students: [],
				showht: false,
				showbx: false,
				ht: '',
				bx: '',
				startTime: '',
				endTime: '',
				teacherId: '',
				peopleNum: '',
				privateCourseTimeInterval: [],
				day: '',
				isJoin: 0
			}
		},
		onLoad(ops) {
			console.log(123, ops)
			let color = this.$app.ztColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: color // 导航栏背景颜色
			});
			this.id = ops.id;
			this.isJoin = ops.isJoin || 0;
			this.username = this.userInfo.nickName;
			this.usernames = this.userInfo.nickName;
			this.userTel = this.userInfo.phone;
			this.userTels = this.userInfo.phone;
			this.day = ops.day || '';
			// this.startTime = ops.startTime || null;
			// this.endTime = ops.endTime || null;
			if (ops.privateCourseTimeInterval) {
				this.privateCourseTimeInterval = JSON.parse(ops.privateCourseTimeInterval);
			}
			this.teacherId = ops.teacherId || '';
			if (ops.peopleNumType) {
				this.peopleNum = String(ops.peopleNum);
			}
			this.getDetail()
		},
		onShow() {
			this.studentList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			isTyBtn() {
				this.isActive = !this.isActive
			},
			qrBtn() {
				this.isActive = true
				this.showht = false
				this.submit()
			},
			formatMoney() {
				let price = 0
				let isJoin = this.isJoin
				let students = this.students.length
				let privateCourseTimeInterval = this.privateCourseTimeInterval.length
				let obj = this.details.secKillInfo || {}
				if(students > 1 && privateCourseTimeInterval && 0 && isJoin == 1) {
					price = (obj.discountPrice * students * privateCourseTimeInterval).toFixed(2)
				} else if(students > 1 && privateCourseTimeInterval && 0 && isJoin == 1) {
					price = (this.details.price * students * privateCourseTimeInterval).toFixed(2)
				} else if (isJoin == 1) {
					price = this.details.secKillInfo.discountPrice || 0
				} else {
					price = this.details.price || 0
				}
				return price;
			},
			submit() {
				// let title = '请先阅读并同意相关协议'
				// if (!this.isActive) return uni.showToast({
				// 	title: title,
				// 	icon: 'none',
				// 	duration: 2000
				// })
				if (!this.isActive) {
					return this.showht = true
				}
				if (this.students.length == 0 || !this.students) return uni.showToast({
					title: '请选择参加活动人员',
					icon: 'none',
					duration: 2000
				})
				let that = this
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id,
							userName: this.username,
							phone: this.userTel,
							teacherId: this.teacherId,
							day: this.day,
							isJoin: this.isJoin,
							privateCourseTimeInterval: this.privateCourseTimeInterval,
							// startTime: this.privateCourseTimeInterval[0].startPeriodTime,
							// endTime: this.privateCourseTimeInterval[0].endPeriodTime,
							students: this.students.join(','),
						}
					},
					api: this.$api.enrolCourse()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let orderId = res.record.orderId
						uni.showToast({
							title: '报名成功',
							icon: 'success',
							duration: 2000,
							success(res) {
								that.jump2('/pages/order/pay?type=2&orderId=', orderId)
							}
						})
					}
				}).catch(() => {})
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			checkboxChange(e) {
				this.students = e.detail.value
			},
			getYx() {
				// this.$app.ajax({
				// 	data: {
				// 		param: {
				// 			type: '15',
				// 			code: 'AGREEMENT_COURSE_ENROLL'
				// 		}
				// 	},
				// 	api: this.$api.paymentConfiguration()
				// }).then((res) => {
				// 	if (res.errorCode === '000000') {
				// 		this.ht = res.recordList[0].value
				// 		this.showht = true
				// 	}
				// }).catch(() => {})
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_COURSE_ENROLL&title=', this.venueName || '' + '课程合同')
			},
			getYxb() {
				// this.$app.ajax({
				// 	data: {
				// 		param: {
				// 			type: '15',
				// 			code: 'AGREEMENT_COURSE_SAFE'
				// 		}
				// 	},
				// 	api: this.$api.paymentConfiguration()
				// }).then((res) => {
				// 	if (res.errorCode === '000000') {
				// 		this.showbx = true
				// 		this.bx = res.recordList[0].value
				// 	}
				// }).catch(() => {})
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_COURSE_SAFE&title=','安全与保险须知')
			},
			onhtClose() {
				this.showht = !this.showht
			},
			onbxClose() {
				this.showbx = !this.showbx
			},
			addShow() {
				this.jump('/pages/member/addStudent')
			},
			memberTJ() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!this.usernames) return uni.showToast({
					title: '请输入联系人姓名',
					icon: 'none',
					duration: 2000
				})
				if (this.usernames.length > 10) return uni.showToast({
					title: '请输入正确联系人姓名',
					icon: 'none',
					duration: 2000
				})
				if (!this.userTels) return uni.showToast({
					title: '请输入联系人电话',
					icon: 'none',
					duration: 2000
				})
				if (!reg_tel.test(this.userTels)) return uni.showToast({
					title: '请正确填写您的手机号码',
					icon: 'none',
					duration: 2000
				})
				this.show = false
				this.username = this.usernames
				this.userTel = this.userTels
			},
			editUser() {
				this.show = !this.show
			},
			studentList() {
				this.$app.ajax({
					api: this.$api.studentList(),
					data: {
						userId: this.userInfo.id,
						param: {}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						arr.forEach(e => {
							e.value = e.id
						})
						this.items = arr
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.infoCourseMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id,
							teacherId: this.teacherId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let obj = res.record
						// obj.secKillInfo = {
						// 	"id": 1,
						// 	"type": "0",
						// 	"status": "1",
						// 	"discountPrice": 10,
						// 	"surplus": "不限制",
						// 	"duration": 1866422,
						// 	"isNotify": "1"
						// }
						this.details = obj 
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.box {
		padding-bottom: 100rpx;
	}

	.detailsTop {
		padding: 30rpx 30rpx 110rpx;
		position: relative;
		background: $color;
		width: 750rpx;
		box-sizing: border-box;

		view {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			&.name {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: bolder;
				margin-bottom: 24rpx;
			}
		}

	}


	.detailsBottom {
		padding: 30rpx 30rpx;
		background-color: #fff;
		position: relative;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto 20rpx;
		box-sizing: border-box;

		&.lxxx {
			margin-top: -80rpx;
		}

		.fwb {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-bottom: 24rpx;

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: $color;
			}
		}

		.zks {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			text {
				&:last-of-type {
					font-weight: bolder;
				}
			}
		}

		.kcj {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #222222;
			// padding-top: 20rpx;

			view {
				&:last-of-type {
					color: $red;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;

					text {
						font-weight: bolder;
					}
				}
			}
		}

		.label {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.apply {
		align-items: flex-start;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.activeDetails {
		width: 78%;
	}

	.label {
		display: flex;
		line-height: 1.5;
		font-size: 28rpx;
		margin-bottom: 16rpx;
		font-weight: 400;
		color: #222222;

		.label-left {
			color: #666666;
			display: inline-block;
			width: 5em;
		}

		.label-right {
			flex: 1;
			color: #333333;
		}
	}

	.xueyuan {
		margin-bottom: 20rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.label {
			flex: 1;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-bottom: 0;

			text {
				color: #999999;
				margin-left: 20rpx;
			}
		}
	}



	.kuan {
		height: 120rpx;
	}

	.box_footer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		padding: 0;
		background-color: #fff;
		box-sizing: border-box;

		.box_footer_agree {
			display: flex;
			padding: 20rpx 30rpx;
			background: $xybj;
			align-items: flex-start;
			box-sizing: border-box;

			text {
				color: #333333;
				font-size: 26rpx;
				margin-left: 5rpx;
				color: $color;
			}
		}

		.bottomState {
			width: 100%;
			padding: 16rpx 30rpx;
			background-color: #fff;
			box-sizing: border-box;

			.right {
				height: 68rpx;
				padding: 0 34rpx;
				color: #fff;
				background-color: $color;
				font-size: 28rpx;
				border-radius: 34rpx;
				line-height: 68rpx;
				margin-left: 20rpx;
			}

			.left {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;

				text {
					font-size: 32rpx;
					font-weight: bolder;
				}
			}
		}

	}
</style>